<script setup>
import { ref, onMounted } from "vue";
import { searchMaterial } from '@/apis/search'
import { Message } from "tdesign-mobile-vue";
import { useRouter } from "vue-router";
import defaultImg from "../../assets/material.png"

const key = ref('');
const count = ref(0);
const current_page = ref(1);
const last_page = ref(1);
const result = ref([]);
const isLoading = ref(false);
const router = useRouter();
const onLoad = ref(false);
const loading = ref('');

onMounted(() => {
  //searchFunc();
})

function searchFunc() {
  isLoading.value = true;
  searchMaterial({
    condition: [
      ['name|material_id', 'like', `%${key.value}%`]
    ],

  }, current_page.value)
    .then(res => {
      const { code, msg, data } = res.data;
      if (code === 1) {
        result.value = data.data;
        count.value = data.total;
        current_page.value = data.current_page;
        last_page.value = data.last_page;
      } else {
        Message.error({
          content: msg,
          context: document.querySelector('main'),
          offset: [8, 8]
        })
      }
    })
    .finally(() => {
      isLoading.value = false
    })
}

function onScroll(e) {
  if (current_page.value > last_page.value) {
    loading.value = "";
    return;
  }

  if (e < 106 && !onLoad.value) {
    loading.value = "loading";
    onLoad.value = true;
    current_page.value++;
    searchMaterial({
      condition: [
        ['name|material_id', 'like', `%${key.value}%`]
      ],
    }, current_page.value)
      .then(res => {
        const { code, msg, data } = res.data;
        if (code === 1) {
          result.value = [...result.value, ...data.data];
          count.value = data.total;
          current_page.value = data.current_page;
          last_page.value = data.last_page;
        } else {
          Message.error({
            content: msg,
            context: document.querySelector('main'),
            offset: [8, 8]
          })
        }
      })
      .finally(() => {
        onLoad.value = false
      })
  }
}
</script>
<template>
  <main>
    <div class="search-container">
      <t-search type="search" v-model="key" placeholder="名称/编码/条码" @submit="searchFunc"></t-search>
    </div>

    <div id="loading" v-if="isLoading">
      <t-loading></t-loading>
    </div>

    <div id="noloading" v-else>
      <div class="preview">
        共 {{ count }} 条结果
      </div>

      <template v-if="count < 1">
        <t-empty description="这里是空的">
          <template #icon>
            <t-icon name="info-circle"></t-icon>
          </template>
        </t-empty>
      </template>

      <template v-if="count > 0">
        <t-list @scroll="onScroll" :async-loading="loading">
          <t-cell v-for="item in result" :title="item.name" :key="item.id"
            :image="item.cover_info?.url !== null ? item.cover_info?.url : defaultImg"
            @click="router.push({ name: 'material-info', params: { id: item.id } })">
            <template #description>
              <t-tag style="margin: 4px;">物品编码: {{ item.material_id }}</t-tag>
              <t-tag style="margin: 4px;" theme="success">物品规格: {{ item.unit }}</t-tag>
              <t-tag style="margin: 4px;" theme="primary">库存数量: {{
                item.total || 0
              }}
              </t-tag>
            </template>
          </t-cell>
        </t-list>
      </template>
    </div>
  </main>
</template>
<style scoped lang="less">
.search-container {
  background-color: #0052d9;
  padding: 8px;
}

.preview {
  padding: 8px;
  font-weight: 600;
}
</style>